<template>
  <div class="message-service">
    <div v-if="!showSecondary" class="main">
      <div class="lists">
        <JeList class="WEB" :title="$t('message.web')" :info="$t('message.webTip')">
          <template #left
            ><Checkbox v-model:checked="WEB" @change="changeEvent(WEB, 'WEB')"></Checkbox
          ></template>
        </JeList>
        <JeList class="EMAIL" :title="$t('message.mail')" :info="$t('message.mailTip')">
          <template #left
            ><Checkbox v-model:checked="EMAIL" @change="changeEvent(EMAIL, 'EMAIL')"></Checkbox
          ></template>
        </JeList>
        <JeList
          class="NOTE"
          :title="$t('message.note')"
          :info="$t('message.noteTip')"
          :is-show="true"
          @listClick="listClick"
        >
          <template #left
            ><Checkbox v-model:checked="NOTE" @change="changeEvent(NOTE, 'NOTE')"></Checkbox
          ></template>
        </JeList>
        <!-- <JeList :show="true" class="APP" :title="$t('message.app')" :info="$t('message.appTip')">
          <template #left
            ><Checkbox v-model:checked="APP" @change="changeEvent(APP, 'APP')"></Checkbox
          ></template>
        </JeList>
        <JeList :show="true" class="WECHAT" :title="$t('message.wx')" :info="$t('message.tips')">
          <template #left
            ><Checkbox v-model:checked="WECHAT" @change="changeEvent(WECHAT, 'WECHAT')"></Checkbox
          ></template>
        </JeList>
        <JeList :show="true" class="FLYBOOK" :title="$t('message.fs')" :info="$t('message.tips')">
          <template #left
            ><Checkbox
              v-model:checked="FLYBOOK"
              @change="changeEvent(FLYBOOK, 'FLYBOOK')"
            ></Checkbox
          ></template>
        </JeList>
        <JeList :show="true" class="DINGTALK" :title="$t('message.dd')" :info="$t('message.tips')">
          <template #left
            ><Checkbox
              v-model:checked="DINGTALK"
              @change="changeEvent(DINGTALK, 'DINGTALK')"
            ></Checkbox
          ></template>
        </JeList>
        <JeList
          :show="true"
          class="WELINK"
          :title="$t('message.welink')"
          :info="$t('message.tips')"
        >
          <template #left
            ><Checkbox v-model:checked="WELINK" @change="changeEvent(WELINK, 'WELINK')"></Checkbox
          ></template>
        </JeList> -->
      </div>
      <div class="tips">
        <p>{{ $t('message.fristTip') }}</p>
        <p>{{ $t('message.secondTip') }}</p>
      </div>
    </div>
    <div v-else class="secondary">
      <NoteMessage :data-all="dataAllSon" :subpage-name="subpageName" @showMain="showMain" />
    </div>
  </div>
</template>

<script>
  import JeList from '@/components/je-list.vue';
  import NoteMessage from './note-message.vue';
  import { Checkbox, Modal } from '@jecloud/ui';
  import { onUnmounted, reactive, ref } from 'vue';
  import VueEvent from '@/helper/model/event';
  import { useOpenDialog } from '@/hooks';
  import { isArrEqual } from '@/helper/method';
  import { saveConfigData } from '@/api';
  import { onScroll } from '@/utils/utils';
  export default {
    name: 'MessageService',
    components: {
      JeList,
      Checkbox,
      NoteMessage,
    },
    props: {
      dataAll: {
        type: Array,
        default: () => [],
      },
    },
    setup(props) {
      // 给子页面的数据
      const dataAllSon = reactive(props.dataAll);
      // 表单数据
      let formState = reactive({
        JE_PUSH_PLATFORM: ['COMMON'],
      });
      // 对比项
      let meta = {};
      let res = {};

      // 多选框是否选中
      // todo
      // let WECHAT = ref(false);
      // let FLYBOOK = ref(false);
      // let DINGTALK = ref(false);
      let WEB = ref(false);
      // let WELINK = ref(false);
      let NOTE = ref(false);
      let EMAIL = ref(false);
      // let APP = ref(false);

      // 获取回显数据
      const changeDataType = (parame) => {
        res = parame.filter((item) => {
          return item.key === 'MessageService';
        });
        res[0]?.items.find((item) => {
          if (typeof item.value === 'string') {
            item.value = item.value.split(',');
          }
          formState.JE_PUSH_PLATFORM = item.value;
        });
        // 回显
        formState.JE_PUSH_PLATFORM.map((td) => {
          if (td == 'WEB') {
            WEB.value = true;
            // } else if (td == 'FLYBOOK') {
            //   FLYBOOK.value = true;
            // } else if (td == 'DINGTALK') {
            //   DINGTALK.value = true;
            // } else if (td == 'WECHAT') {
            //   WECHAT.value = true;
            // } else if (td == 'WELINK') {
            //   WELINK.value = true;
          } else if (td == 'NOTE') {
            NOTE.value = true;
          } else if (td == 'EMAIL') {
            EMAIL.value = true;
            // } else if (td == 'APP') {
            //   APP.value = true;
          }
        });
        meta = JSON.parse(JSON.stringify(formState));
      };
      changeDataType(props.dataAll);

      const dataCallback = (data) => {
        changeDataType(data);
      };

      // 表单数据是否改变
      const isChange = function () {
        return isArrEqual(meta['JE_PUSH_PLATFORM'], formState['JE_PUSH_PLATFORM']);
      };
      // 子页面是否打开
      const showSecondary = ref(false);

      // 点击左侧导航栏,是否允许跳转
      const isSaveCallback = () => {
        // 子页面打开就返回
        if (showSecondary.value) return false;
        if (isChange()) return changeBar();
        const { JE_PUSH_PLATFORM } = { ...formState };
        useOpenDialog({
          attribute: 'message-service',
          allFields: JSON.stringify({
            ...formState,
            JE_PUSH_PLATFORM: JE_PUSH_PLATFORM.join(','),
          }),
        });
      };

      // 点击到下一页
      const listClick = (val) => {
        showSecondary.value = val;
      };
      const showMain = (val) => {
        showSecondary.value = val;
      };
      // 多选的增删
      const changeEvent = (bol, parame) => {
        if (bol) {
          if (!formState.JE_PUSH_PLATFORM.includes(parame)) {
            formState['JE_PUSH_PLATFORM'].push(parame);
          }
        } else {
          formState['JE_PUSH_PLATFORM'].splice(formState.JE_PUSH_PLATFORM.indexOf(parame), 1);
        }
      };

      // 点击保存的回调
      const clickCallback = () => {
        if (!isChange()) {
          const { JE_PUSH_PLATFORM } = { ...formState };
          saveConfigData({
            attribute: 'message-service',
            allFields: JSON.stringify({
              ...formState,
              JE_PUSH_PLATFORM: JE_PUSH_PLATFORM.join(','),
            }),
            type: '',
          }).then(
            (meta = JSON.parse(JSON.stringify(formState))),
            !showSecondary.value && Modal.notice('保存成功', 'success'),
            // 修改全局数据
            VueEvent.emit('changeAllData', {
              item: 'message-service',
              formState,
            }),
          );
        } else {
          // 如果显示了子页面就不提示
          if (!showSecondary.value) {
            Modal.notice('无数据操作!', 'info');
          }
        }
      };

      // 左侧导航栏是否允许跳转
      const changeBar = () => {
        VueEvent.emit('saveResult', isChange());
      };

      // 子页面
      const subpageName = ref('');
      // 搜索:子页面的跳转
      const toSubpage = (data) => {
        const { name, parentName } = { ...data };
        if (parentName) {
          listClick(name, true);
        }
      };

      // 滚动及动画
      const onScrolled = () => {
        showSecondary.value = false;
        setTimeout(() => {
          onScroll();
        }, 100);
      };
      VueEvent.on('toolbarSaveEvent', clickCallback);
      VueEvent.on('sendData', dataCallback);
      VueEvent.on('isSave', isSaveCallback);
      VueEvent.on('toSubpage', toSubpage);
      VueEvent.on('fadeScroll', onScrolled);
      onUnmounted(() => {
        VueEvent.off('toolbarSaveEvent', clickCallback);
        VueEvent.off('sendData', dataCallback);
        VueEvent.off('isSave', isSaveCallback);
        VueEvent.off('toSubpage', toSubpage);
        VueEvent.off('fadeScroll', onScrolled);
      });

      return {
        showSecondary,
        listClick,
        showMain,
        changeEvent,
        // WECHAT,
        // FLYBOOK,
        // DINGTALK,
        WEB,
        // WELINK,
        NOTE,
        EMAIL,
        // APP,
        dataAllSon,
        subpageName,
      };
    },
  };
</script>

<style lang="less" scoped>
  .message-service {
    padding: 30px 100px;
    // margin: 30px auto;
    width: 100%;
    font-size: 14px;
    color: #333333;
    .tips {
      margin-top: 30px;
      padding: 12px 0px 0px 20px;
      width: 810px;
      height: 74px;
      border: 1px solid #abd09d;
      background: #eff9f2;
      color: #36761f;
      border-radius: 2px;
      font-size: 14px;
      line-height: 15px;
    }
  }
</style>
